<template>
  <div style="border: 1px solid #ccc;">
      <Toolbar
          style="border-bottom: 1px solid #ccc"
          :editor="editor"
          :defaultConfig="toolbarConfig"
          :mode="mode"
      />
      <Editor
          style="height: 420px; overflow-y: hidden;"
          v-model="html"
          :defaultConfig="editorConfig"
          :mode="mode"
          @onCreated="onCreated"
          @onChange="onChange"
      />
  </div>
</template>

<script>
import Vue from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

export default Vue.extend({
  components: { Editor, Toolbar },
  data() {
      return {
          editor: null,
          html: '<p></p>',
          toolbarConfig: { },
          editorConfig: { 
            placeholder: '请输入内容...',
            MENU_CONF: {
            // 配置上传图片
            uploadImage: {
				// 后端上传地址，必填
				server: this.$baseUrl + '/files/SongImgUpload',
 
                headers: { token: JSON.parse(localStorage.getItem('token') || '{}')},

					timeout: 5 * 1000, // 5s 超时时间
 
					fieldName: 'custom-fileName',
							//选择文件时的类型限制，默认为['image/*'] 如不想限制，则设置为 []
					allowedFileTypes: [],
					metaWithUrl: true, // 参数拼接到 url 上
					maxFileSize: 1000 * 1024 * 1024, //1g //设置大点 不然图片过大会报错
 
					base64LimitSize: 1000000 * 1024, // 1g 以下插入 base64
							// 上传前
					onBeforeUpload(file) {
						console.log('onBeforeUpload', file)
							// Message({
								//                 message: '图片正在上传中,请耐心等待',
								//                 duration: 0,
								//                 customClass: 'uploadTip',
								//                 iconClass: 'el-icon-loading',
								//                 showClose: true
								//               });
						return files;
								return file.url // 返回哪些文件可以上传
								// return false 会阻止上传
					},
							 // 上传进度的回调函数
					onProgress(progress) {
						console.log('onProgress', progress)
					},
							 // 单个文件上传成功之后
					onSuccess(file, res) {
						console.log('onSuccess', file.url, res)
					},
							// 单个文件上传失败
					onFailed(file, res) {
						alert(res.message)
						console.log('onFailed', file, res)
    				},
							// 上传错误，或者触发 timeout 超时
					onError(file, err, res) {
						alert(err.message)
						console.error('onError', file, err, res)
					},
                }
            }
        },
          mode: 'default', // or 'simple'
      }
  },
  methods: {
      onCreated(editor) {
          this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
      },
      onChange(){
        console.log(this.html)
        this.$emit('sendEditor',this.html)
      }
  },
  mounted() {
      // // 模拟 ajax 请求，异步渲染编辑器
      // setTimeout(() => {
      //     this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>'
      // }, 1500)
  },
  beforeDestroy() {
      const editor = this.editor
      if (editor == null) return
      editor.destroy() // 组件销毁时，及时销毁编辑器
  }
})
</script>


<style src="@wangeditor/editor/dist/css/style.css"></style>
<style scoped>

</style>